<template>
  <div class="boxView">
    <div
      class="divFlex"
      style="justify-content: space-between; margin-bottom: 10px"
    >
      <div class="divFlex">
        <div style="margin-right: 20px">尿检预警</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="根据社戒社康人员当前应检测周期时间提前15天预警显示"
          placement="right-start"
        >
          <i class="el-icon-warning" />
        </el-tooltip>
      </div>
      <div class="divFlex">
        <div class="detailTitle" @click="openModal">详情</div>
      </div>
    </div>
    <div class="numberView">{{ num }}人</div>
    <ModalView ref="modalRef" />
  </div>
</template>
<script>
import ModalView from "./modal.vue";
import { getXzrs, getStatistics } from "@/api/earlyWarning/njyj";
export default {
  components: {
    ModalView,
  },
  data() {
    return {
      num: 0,
    };
  },
  mounted() {
    this.getRs();
  },
  methods: {
    openModal() {
      this.$refs["modalRef"].openModal();
    },
    getRs() {
      getXzrs().then((response) => {
        this.num = response.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.boxView {
  width: 100%;
  height: calc((100vh - 240px) / 4);
  background: #fff;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 6px #ccc;
}
.divFlex {
  display: flex;
  align-items: center;
}
.detailTitle {
  font-size: 14px;
  color: rgb(124, 183, 244);
  cursor: pointer;
}
.numberView {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 30px;
}
</style>
